<template>
  <div class="post">
    <!--header-->
    <div class="bar-info" v-if="postData.barName">
      <!--贴吧头像-->
      <el-avatar v-if="this.postData.barAvatar" :size="60" :src="barAvatarUrl" @click.native="openBarPage"
                 style="cursor: pointer"></el-avatar>
      <div class="bar-info-right">
        <!--贴吧名字-->
        <div class="barName" @click="openBarPage">
          {{ postData.barName }}
          <i class="el-icon-eleme"></i>
        </div>
        <!--关注、帖子信息-->
        <div class="post-dynamic-info">
          <span>关注 {{ postData.followNum }}</span>
          <span>帖子 {{ postData.postNum }}</span>
        </div>
      </div>
    </div>
    <!--title-->
    <div class="post-title" @click="openPostPage">
      <!--用户昵称-->
      <span class="nickname" @click.stop="openUserPage">
        {{ '@' + postData.nickname + ' :' }}
      </span>
      <!--帖子标题-->
      <span v-html="postData.title"></span>
    </div>
    <!--main-->
    <div class="post-content">
      <!--帖子内容-->
      <div v-html="postData.content"></div>
      <!--图片/视频-->
      <div style="margin-top: 10px;">
        <el-image
          v-for="item in this.mediaList"
          :key="item"
          :src="item"
          :preview-src-list="mediaList"
          fit="cover"
        />
      </div>
    </div>
    <!--footer-->
    <div>
      <!--回复数-->
      <span style="width: 100px;display:inline-block;"><i class="el-icon-huifu"/>{{ postData.replyNum }}</span>
      <!--点赞数-->
      <span @click="changeLike">
        <i v-if="isLike" class="el-icon-dianzan" style="color: red"/>
        <i v-else class="el-icon-dianzan"/>
        {{ likes }}
      </span>
    </div>
  </div>
</template>

<script>
import { baseUrl } from '@/utils/const'
import { changeLike, isLike } from '@/api/user_like_post'
import { getId } from '@/utils/auth'

export default {
  name: 'Post',
  props: {
    postData: {
      required: true,
      type: Object
    }
  },
  data () {
    return {
      isLike: '',
      changeNum: 0
    }
  },
  computed: {
    mediaList () {
      if (!this.postData.media) {
        return []
      } else if (this.postData.media[0] === '#') {
        const arr = this.postData.media.split('#')
        arr.shift()
        return arr.map(item => {
          return baseUrl + item
        })
      } else {
        return [baseUrl + this.postData.media]
      }
    },
    barAvatarUrl () {
      return baseUrl + this.postData.barAvatar
    },
    likes () {
      return this.postData.likes + this.changeNum
    }
  },
  created () {
    this.judgeIsLike()
  },
  methods: {
    // 判断是否点赞
    async judgeIsLike () {
      const res = await isLike(getId(), this.postData.id)
      this.isLike = res.isLike
    },
    // 改变点赞
    async changeLike () {
      const res = await changeLike(this.isLike, getId(), this.postData.id)
      if (res.code === 200) {
        if (this.isLike) {
          this.changeNum--
          this.isLike = !this.isLike
        } else {
          this.changeNum++
          this.isLike = !this.isLike
        }
      }
    },
    // 进入贴吧
    openBarPage () {
      const routeData = this.$router.resolve({
        path: '/barPage',
        query: {
          id: this.postData.barId
        }
      })
      window.open(routeData.href)
    },
    // 进入用户页面
    openUserPage () {
      const routeData = this.$router.resolve({
        path: '/userPage',
        query: {
          id: this.postData.userId
        }
      })
      window.open(routeData.href)
    },
    // 进入帖子详情
    openPostPage () {
      const routeData = this.$router.resolve({
        path: '/postPage',
        query: this.postData
      })
      window.open(routeData.href)
    }
  }
}
</script>

<style scoped lang="less">
.post {
  padding: 20px;
  width: 560px;
  //margin: 0 auto;

  .bar-info {
    display: flex;
    //justify-content: center;
    margin-bottom: 10px;

    .bar-info-right {
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .barName {
        font-weight: 700;
        color: @menuText;
        font-size: large;
        margin-bottom: 10px;
        cursor: pointer;
      }

      .post-dynamic-info {
        color: @menuText_gray;

        span {
          margin-right: 15px;
        }
      }
    }
  }

  .post-title {
    font-weight: 700;
    margin-bottom: 10px;
    cursor: pointer;

    .nickname {
      font-weight: 500;
      color: @blue;
      cursor: pointer;
    }
  }

  .post-title:hover {
    color: #016e99;
  }

  .post-content {
    //margin-bottom: 10px;
    line-height: 2;

    .el-image {
      width: 150px;
      height: 150px;
      border: 1px solid @borderBase;
    }
  }
}

</style>
